<template>
	<view class="wrap-article-info">
		<view class="title-bg flex align-base just-between">
			<view class="title f-30">文章发布</view>

			<view class="more flex align-center" @click="onMore">
				<view class="f-24">全部记录</view>

				<image class="arrow" :src="$staticImagePath('mine/arrow_right.png')" />
			</view>
		</view>

		<view class="list flex">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex column align-center just-center" @click="onItem(item)">
					<image class="img" :src="$staticImagePath(item.icon)" />

					<view class="name f-26">{{ item.title }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						title: "待审核",
						icon: "mine/article_dsh.png",
						url: "/pages/home/article/publishList?audit=1",
					},
					{
						title: "已审核",
						icon: "mine/article_ysh.png",
						url: "/pages/home/article/publishList?audit=2",
					},
					{
						title: "已驳回",
						icon: "mine/article_ybh.png",
						url: "/pages/home/article/publishList",
					},
					{
						title: "已领完",
						icon: "mine/article_ylw.png",
						url: "/pages/home/article/publishList",
					},
				],
			};
		},
		methods: {
			/**
			 * 更多
			 */
			onMore() {
				this.$jump.to("/pages/home/article/publishList");
			},
			/**
			 * 点击
			 */
			onItem(item) {
				this.$jump.to(item.url);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-article-info {
		width: 100%;
		overflow: hidden;
		background-color: white;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 36rpx 0rpx 44rpx;

		.title-bg {
			width: 100%;
			overflow: hidden;
			padding: 0 30rpx 0 40rpx;
			box-sizing: border-box;

			.title {
				color: #333333;
			}

			.more {
				gap: 10rpx;
				color: #888888;

				.arrow {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}

		.list {
			margin-top: 38rpx;
			width: 100%;
			flex-wrap: wrap;
			overflow: hidden;

			.item {
				width: 25%;
				overflow: hidden;
				gap: 18rpx;

				.img {
					width: 60rpx;
					height: 60rpx;
				}

				.name {
					color: #121212;
				}
			}
		}
	}
</style>
